<template>
  <!-- videoDetail 针对商西的详情 -->
  <div class="video-detail mediumtablestyle">
    <div class="top betweenbox">
      <div>视频详情</div>
      <div class="top-back" @click="goBack"></div>
    </div>
    <div class="main betweenbox">
      <div class="main-left colbetweenbox">
        <div class="borderStyle">
          <div class="title blueTitleStyle">告警信息</div>
          <div class="content">{{Data1}}</div>
        </div>

        <div class="borderStyle">
          <div class="title blueTitleStyle">联动控制信息</div>
          <div class="content">
            <el-table
              border
              :data="Data2"
              style="width: 100%"
              height="100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="deviceName" label="联动设备"></el-table-column>
              <el-table-column prop="statusName" label="当前状态"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="borderStyle">
          <div class="title blueTitleStyle">联动视频信息</div>
          <div class="content">
            <el-table
              border
              :data="newData3"
              style="width: 100%"
              height="100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="videoName" label="摄像头名称"></el-table-column>
              <el-table-column prop="positionName" label="预置位名称"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="borderStyle">
          <div class="title blueTitleStyle">主设备信息</div>
          <div class="content">
            <el-table
              border
              :data="mainDeviceData"
              style="width: 100%"
              height="100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="name" label="类型"></el-table-column>
              <el-table-column prop="gao" label="高压侧"></el-table-column>
              <el-table-column prop="zhong" label="中压侧"></el-table-column>
              <el-table-column prop="di" label="低压侧"></el-table-column>
            </el-table>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="goTask">发起特巡</el-button>
        </div>
      </div>
      <div class="main-center colbetweenbox">
        <div class="borderStyle">
          <div class="title blueTitleStyle">油色谱</div>
          <div class="content tables">
            <div v-for="(item,index) in oilcolordata" :key="index" class="tables-item centerbox">
              <div class="centerbox">{{item.name}}</div>
              <div class="centerbox">{{item.value}}</div>
            </div>
          </div>
        </div>
        <div class="borderStyle">
          <div class="title blueTitleStyle">{{newdata7.dwName}}</div>
          <div class="content tables-item centerbox">
            <div class="centerbox">{{newdata7.name}}</div>
            <div class="centerbox">{{newdata7.value}}</div>
          </div>
        </div>
        <div class="borderStyle">
          <div class="title blueTitleStyle">#1主变10kV进线柜触臂温度在线监测(℃)</div>
          <div class="content tables">
            <div v-for="(item,index) in Data8" :key="index" class="tables-item centerbox">
              <div class="centerbox">{{item.name}}</div>
              <div class="centerbox">{{item.value}}</div>
            </div>
          </div>
        </div>
        <div class="borderStyle">
          <div class="title blueTitleStyle">光纤监测</div>
          <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs-item" height="100%">
              <el-tab-pane label="温度" name="first">
                <el-table
                  border
                  :data="socketData['030901']"
                  style="width: 100%"
                  height="100%"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column type="index" width="55" label="序号"></el-table-column>
                  <el-table-column prop="name" label="装置名称" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="value" label="温度(℃)" width="90"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="压力" name="second">
                <el-table
                  border
                  :data="socketData['030902']"
                  style="width: 100%"
                  height="100%"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column type="index" width="55" label="序号"></el-table-column>
                  <el-table-column prop="name" label="装置名称" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="value" label="压力" width="90"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="振幅" name="third">
                <el-table
                  border
                  :data="socketData['03090304']"
                  style="width: 100%"
                  height="100%"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column type="index" width="55" label="序号"></el-table-column>
                  <el-table-column prop="name" label="装置名称" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="value" label="振幅" width="90"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="放电" name="fourth">
                <el-table
                  border
                  :data="socketData['030905']"
                  style="width: 100%"
                  height="100%"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column type="index" width="55" label="序号"></el-table-column>
                  <el-table-column prop="name" label="装置名称" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="value" label="放电" width="90"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="main-right">
        <rightVideo :datas="newData3" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import rightVideo from "./rightVideo.vue";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import _ from "lodash";
interface optionList {
  value: string;
  label: string;
}
@Component({
  components: { rightVideo },
})
export default class extends Vue {
  Data1: string = "";
  Data2: any = [];
  Data3: any = [];
  Data4: any = [
    {
      type: "Ua（kV）",
      high: "65.21",
      medium: "21.79",
      low: "5.89",
    },
  ];
  Data7: object = {
    name: "全电流（mA）",
    value: 0,
    ssdwId: "6011#030805#01372",
    ssdwMc: "#1主变铁芯接地电流",
  };
  Data8: any = [
    {
      name: "A相上",
      value: "65.21",
    },
    {
      name: "B相上",
      value: "17.03",
    },
    {
      name: "C相上",
      value: "265.77",
    },
    {
      name: "A相下",
      value: "1.14",
    },
    {
      name: "B相下",
      value: "0.12",
    },
    {
      name: "C相下",
      value: "0.25",
    },
  ];
  // 光纤监测的tab
  activeName: string = "first";

  mounted() {
    this.fetch(this.$route.query.id);
  }

  fetch(id) {
    var params: any = {
      id: id,
    };
    // console.log(params);
    (this as any).$services
      .getLinkageParticulars({ method: "post", data: params, postparams: true })
      .then((result: any) => {
        // console.log(result.data);
        if (result.data) {
          this.Data1 = result.data.linkageReason;
          this.Data2 = result.data.operationPointerList;
          this.Data3 = result.data.operationVideoPosition;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 视频信息
  get newData3() {
    // let data = this.Data3;
    let data = [];
    return data;
  }

  // 返回联动事件查询
  goBack() {
    this.$router.push("linkage");
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  // 光纤监测的tab切换
  handleClick(tab: any, event: any) {
    // console.log(tab, event);
  }
  // 发起特训 去任务管理
  goTask() {
    this.$router.push({
      path: "/jointInspection/task",
    });
  }

  // 实时数据-光纤监测
  get socketData() {
    let sxData = GetSocketModule.getterAllAuxiliaryByStationId["100435539"];
    let obj = {
      "030901": [], //测温点位
      "030902": [], //压力点位
      "030903": [], //震幅点位
      "030904": [], //震幅点位
      "030905": [], //放电点位
      "03090304": [],
    };
    let objKeys = Object.keys(obj);
    sxData.map((k) => {
      if (objKeys.indexOf(k.dwValue) >= 0) {
        obj[k.dwValue] = obj[k.dwValue] || [];
        obj[k.dwValue].push(k);
      }
    });
    obj["03090304"] = obj["030903"].concat(obj["030904"]);
    return obj;
  }

  // 电流
  get newdata7() {
    let sxData = GetSocketModule.getterAllAuxiliaryByStationId["100435539"];
    var obj = sxData.filter((o) => o.id == "6011#030805#01372")[0] || {};
    return obj;
  }

  // 主设备
  get mainDeviceData() {
    let data = [];
    let sxData = GetSocketModule.getterAllAuxiliaryByStationId["100435539"];
    let dwdata = [
      { id: "6011#090205#00957", name: "Uag" },
      { id: "6011#090205#00737", name: "Uaz" },
      { id: "6011#090205#00805", name: "Uad" },
      { id: "6011#090205#00958", name: "Ubg" },
      { id: "6011#090205#00738", name: "Ubz" },
      { id: "6011#090205#00806", name: "Ubd" },
      { id: "6011#090205#00959", name: "Ucg" },
      { id: "6011#090205#00739", name: "Ucz" },
      { id: "6011#090205#00807", name: "Ucd" },
      { id: "6011#090301#00989", name: "Iag" },
      { id: "6011#090301#00995", name: "Iaz" },
      { id: "6011#090301#01001", name: "Iad" },
      { id: "6011#090301#00990", name: "Ibg" },
      { id: "6011#090301#00996", name: "Ibz" },
      { id: "6011#090301#01002", name: "Ibd" },
      { id: "6011#090301#00991", name: "Icg" },
      { id: "6011#090301#00997", name: "Icz" },
      { id: "6011#090301#01003", name: "Icd" },
      { id: "6011#090201#00992", name: "Pg" },
      { id: "6011#090201#00998", name: "Pz" },
      { id: "6011#090201#01004", name: "Pd" },
      { id: "6011#090303#00993", name: "Qg" },
      { id: "6011#090303#00999", name: "Qz" },
      { id: "6011#090303#01005", name: "Qd" },
      { id: "6011#090115#01025", name: "yw1" },
      { id: "6011#090115#01026", name: "yw2" },
    ];

    let tablelist = [];
    dwdata.map((k, j) => {
      var obj = sxData.filter((o) => o.id == k.id)[0] || {};
      if (k.name.indexOf("g") > -1) {
        tablelist.push({
          name: k.name.length > 2 ? k.name.slice(0, 2) : k.name.slice(0, 1),
          value: obj.value || 0,
          type: "gao",
        });
      } else if (k.name.indexOf("z") > -1) {
        tablelist.push({
          name: k.name.length > 2 ? k.name.slice(0, 2) : k.name.slice(0, 1),
          value: obj.value || 0,
          type: "zhong",
        });
      } else if (k.name.indexOf("d") > -1) {
        tablelist.push({
          name: k.name.length > 2 ? k.name.slice(0, 2) : k.name.slice(0, 1),
          value: obj.value || 0,
          type: "di",
        });
      } else {
        tablelist.push({
          name: k.name,
          value: obj.value || 0,
          type: "other",
        });
      }
    });
    var obj = {};
    tablelist.forEach((a, b) => {
      obj[a.name] = obj[a.name] || [];
      obj[a.name].push(a);
    });
    for (let key in obj) {
      let datas = {
        name: "",
        gao: "",
        zhong: "",
        di: "",
      };
      obj[key].map((m, n) => {
        if (m.type == "gao") {
          datas.name = m.name;
          datas.gao = m.value;
        } else if (m.type == "zhong") {
          datas.zhong = m.value;
        } else if (m.type == "di") {
          datas.di = m.value;
        } else {
          datas.name = m.name;
          datas.gao = m.value;
        }
      });
      data.push(datas);
    }
    // console.log(data);
    return data;
  }

  // 油色谱
  get oilcolordata() {
    let dwdata = [
      {
        ssdwId: "6011#030105#00051",
        ssdwMc: "#1主变二氧化碳",
      },
      {
        ssdwId: "6011#030106#00052",
        ssdwMc: "#1主变甲烷",
      },
      {
        ssdwId: "6011#030101#00049",
        ssdwMc: "#1主变氢气",
      },
      {
        ssdwId: "6011#030111#00048",
        ssdwMc: "#1主变微水",
      },
      {
        ssdwId: "6011#030104#00050",
        ssdwMc: "#1主变一氧化碳",
      },
      {
        ssdwId: "6011#030108#00053",
        ssdwMc: "#1主变乙炔",
      },
      {
        ssdwId: "6011#030109#00055",
        ssdwMc: "#1主变乙烷",
      },
      {
        ssdwId: "6011#030107#00054",
        ssdwMc: "#1主变乙烯",
      },
      {
        ssdwId: "6011#030110#00056",
        ssdwMc: "#1主变总烃",
      },
    ];
    let sxData = GetSocketModule.getterAllAuxiliaryByStationId["100435539"];
    let data = [];
    dwdata.map((k, j) => {
      data.push(sxData.filter((o) => o.id == k.ssdwId)[0]);
    });
    return data;
  }
}
</script>

<style lang="scss" scoped>
.video-detail {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 0.4rem;
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);
    .title {
      height: 0.3rem;
      font-size: 0.18rem;
      line-height: 0.3rem;
    }
    .content {
      width: 100%;
      height: calc(100% - 0.3rem);
    }
    &-left {
      width: 3.5rem;
      height: 100%;
      > div:nth-child(1) {
        height: 15%;
      }
      > div:nth-child(2) {
        height: 17%;
      }
      > div:nth-child(3) {
        height: 28%;
      }
      > div:nth-child(4) {
        height: calc(40% - 0.96rem);
      }
      > div:nth-child(5) {
        height: 0.36rem;
      }
    }
    &-center {
      width: 3.5rem;
      height: 100%;
      > div:nth-child(1) {
        height: 16%;
        .tables {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          &-item {
            width: 33.33%;
            height: 33.33%;
            > div {
              width: 50%;
              height: 100%;
              border: 1px solid rgb(56, 168, 233);
              font-size: 0.14rem;
            }
          }
        }
      }
      > div:nth-child(2) {
        height: 8%;
        .tables-item {
          > div {
            width: 50%;
            height: 100%;
            border: 1px solid rgb(56, 168, 233);
            font-size: 0.14rem;
            align-items: center;
          }
        }
      }
      > div:nth-child(3) {
        height: 12%;
        .tables {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          &-item {
            width: 33.33%;
            height: 50%;
            > div {
              width: 50%;
              height: 100%;
              border: 1px solid rgb(56, 168, 233);
              font-size: 0.14rem;
            }
          }
        }
      }
      > div:nth-child(4) {
        height: calc(64% - 0.45rem);
        .tabs-item {
          height: 100%;
        }
      }
    }
    &-right {
      width: calc(100% - 7.4rem);
      background-color: #000;
      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<style lang="scss">
.video-detail {
  .el-tabs__content {
    height: calc(100% - 0.55rem);
    overflow-y: auto;
  }
  .el-table td,
  .el-table th {
    padding: 0.05rem 0;
  }
}
</style>
